<template>
	<s-layout title="活动规则" onShareAppMessage :bgStyle="{color:'#EEEEEE'}">
		<view class="top-card ss-flex-col ss-col-center ss-row-center" :style="calcStyle">
			<view class="top-card-title">活动规则</view>
			<image :src="sheep.$url.cdn('/static/store/rules-bg.png')"
				style="width: 273rpx;height: 246rpx;margin-top:2rpx;"></image>
		</view> 
		<view class="main ss-flex-col">
			<view class="card ss-m-t-20">
				<view class="title">1.什么是鲸囍通宝</view>
				<view class="desc">鲸囍通宝是“鲸囍生活”平台给商家和用户提供的一种可累计奖励工具，用户通过【囍豆-囍币-鲸囍通宝】，商家通过【鲸豆-鲸币-鲸囍通宝】兑换获得“鲸囍生活”的优惠券红包锁定名额。</view>
			</view>
			<view class="card ss-m-t-28">
				<view class="title ss-m-t-20">2.消费者如何快速获取鲸囍通宝</view>
				<view class="label">
					1.每日签到可领取囍币 
				</view>
				<view class="label">
					2.完成任务可获取囍币 
				</view>
				<view class="label">
					3.日常分享可获取囍币 
				</view>
				<view class="label">
					4.在商城下单获取囍币
				</view>
				<view class="label">
					5.分享商城好物获取囍币 
				</view>
				<view class="label">
					6.通过社群分享商品获取囍币
				</view>
				<view class="label">
					7.浏览商城商品获取囍币 
				</view>
				<view class="label">
					8.推广鲸囍生活平台获取囍币
				</view>
				<view class="label">
					9.每个月成功邀请好友6个及以上获取囍币
				</view>
			</view>
			<view class="card ss-m-t-28">
				<view class="title">3.商家端如何快速获取鲸囍通宝</view>
				   
				<view class="label">
					1.商家通过鲸囍生活平台的销售兑换鲸豆
				</view>
			</view>
			<view class="card ss-m-t-30">  
				<view class="title">4.消费者鲸囍通宝兑换规则</view>
				     
				<view class="label-txt">
					1元=1囍豆<br>100囍豆=1囍币<br>100囍币=1鲸囍通宝
				</view>
			</view>
			<view class="card">
				<view class="title">5.商家端鲸囍通宝兑换规则</view>
				   
				<view class="label-txt">    
					1元=1鲸豆<br>1000鲸豆=1鲸币<br>100鲸币=1鲸囍通宝
				</view>
			</view>
			<view class="change ss-m-b-10">消费者全平台阶梯兑换规则</view>
			
			<view class="table-view ss-flex-col ss-col-center">
				<view class="cell-view ss-flex-row ss-row-between ss-col-center">
					<view class="cell-view-title ss-flex ss-col-center">前1万个鲸囍通宝</view>
					<view class="cell-view-label ss-flex ss-col-center">100囍豆=1囍币</view>
				</view>
				<view class="cell-view ss-flex-row ss-row-between ss-col-center">
					<view class="cell-view-title ss-flex ss-col-center">1万~10万区间内</view>
					<view class="cell-view-label ss-flex ss-col-center">200囍豆=1囍币</view>
				</view>
				<view class="cell-view ss-flex-row ss-row-between ss-col-center">
					<view class="cell-view-title ss-flex ss-col-center">10万~50万区间内</view>
					<view class="cell-view-label ss-flex ss-col-center">400囍豆=1囍币</view>
				</view>
				<view class="cell-view ss-flex-row ss-row-between ss-col-center">
					<view class="cell-view-title ss-flex ss-col-center">50万~200万区间内</view>
					<view class="cell-view-label ss-flex ss-col-center">800囍豆=1囍币</view>
				</view>
				<view class="cell-view ss-flex-row ss-row-between ss-col-center">
					<view class="cell-view-title ss-flex ss-col-center">200万~400万区间内</view>
					<view class="cell-view-label ss-flex ss-col-center">1600囍豆=1囍币</view>
				</view>
				<view class="cell-view ss-flex-row ss-row-between ss-col-center">
					<view class="cell-view-title ss-flex ss-col-center">400万~800万区间内</view>
					<view class="cell-view-label ss-flex ss-col-center">3200囍豆=1囍币</view>
				</view>
				<view class="cell-view ss-flex-row ss-row-between ss-col-center">
					<view class="cell-view-title ss-flex ss-col-center">800万~1600万区间内</view>
					<view class="cell-view-label ss-flex ss-col-center">6400囍豆=1囍币</view>
				</view>
				<view class="cell-view ss-flex-row ss-row-between ss-col-center">
					<view class="cell-view-title ss-flex ss-col-center">1600万~3200万区间内</view>
					<view class="cell-view-label ss-flex ss-col-center">12800囍豆=1囍币</view>
				</view>
			</view>
			
			<view class="change ss-m-t-30 ss-m-b-10">商家端全平台阶梯兑换规则</view>
			
			<view class="table-view ss-flex-col ss-col-center">
				<view class="cell-view ss-flex-row ss-row-between ss-col-center">
					<view class="cell-view-title ss-flex ss-col-center">前1万个鲸囍通宝</view>
					<view class="cell-view-label ss-flex ss-col-center">1000鲸豆=1鲸币</view>
				</view>
				<view class="cell-view ss-flex-row ss-row-between ss-col-center">
					<view class="cell-view-title ss-flex ss-col-center">1万~10万区间内</view>
					<view class="cell-view-label ss-flex ss-col-center">2000鲸豆=1鲸币</view>
				</view>
				<view class="cell-view ss-flex-row ss-row-between ss-col-center">
					<view class="cell-view-title ss-flex ss-col-center">10万~50万区间内</view>
					<view class="cell-view-label ss-flex ss-col-center">4000鲸豆=1鲸币</view>
				</view>
				<view class="cell-view ss-flex-row ss-row-between ss-col-center">
					<view class="cell-view-title ss-flex ss-col-center">50万~200万区间内</view>
					<view class="cell-view-label ss-flex ss-col-center">8000鲸豆=1鲸币</view>
				</view>
				<view class="cell-view ss-flex-row ss-row-between ss-col-center">
					<view class="cell-view-title ss-flex ss-col-center">200万~400万区间内</view>
					<view class="cell-view-label ss-flex ss-col-center">16000鲸豆=1鲸币</view>
				</view>
				<view class="cell-view ss-flex-row ss-row-between ss-col-center">
					<view class="cell-view-title ss-flex ss-col-center">400万~800万区间内</view>
					<view class="cell-view-label ss-flex ss-col-center">32000鲸豆=1鲸币</view>
				</view>
				<view class="cell-view ss-flex-row ss-row-between ss-col-center">
					<view class="cell-view-title ss-flex ss-col-center">800万~1600万区间内</view>
					<view class="cell-view-label ss-flex ss-col-center">64000鲸豆=1鲸币</view>
				</view>
				<view class="cell-view ss-flex-row ss-row-between ss-col-center">
					<view class="cell-view-title ss-flex ss-col-center">1600万~3200万区间内</view>
					<view class="cell-view-label ss-flex ss-col-center">128000鲸豆=1鲸币</view>
				</view>
			</view>
			
			<view class="explanation">
				说明： 1.用户端每消费1元可兑换1囍豆，用户端是通过阶梯兑换规则实现，消费者获得鲸囍通宝越多，红包发放的越多。 <br>2.商家端通过销售金额兑换鲸币，商家是通过阶梯兑换规则实现，鲸豆兑换鲸币，从而兑换鲸囍通宝，商家获得鲸囍通宝越多，红包发放的越多。 <br>3.每次兑换扣除3%手续费。 <br>4.囍币、囍豆、鲸币、鲸豆，鲸囍通宝，长期有效。 <br>5.最终解释权归公司所有。
			</view>
	
		</view>

	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import $store from '@/sheep/store';
	import {

		onLoad,
		onShow,
		onUnload
	} from '@dcloudio/uni-app';
	import {
		ref,
		computed,
		reactive
	} from 'vue';
	
	const type = ref('user')
	
	const calcStyle = computed(()=>{
		return {
			'background-color':type.value=='user'?"#97C79D":'#4EAAEE'
		}
	})
	
	onLoad((e)=>{
		if(e.type){
			type.value = e.type
		}
	})
	
</script>

<style lang="scss" scoped>
	.top-card {
		height: 368rpx;
		width: 100%;
		
		.top-card-title {
			margin-top: 39rpx;
			padding: 10rpx 4rpx;
			width: 288rpx;
			font-family: GaoDuanHeiXiuDing;
			font-size: 72rpx;
			font-weight: normal;
			line-height: 82rpx;
			letter-spacing: normal;
			color: #5E6ADD;
		}

	}

	.main {
		width: calc(100% - 30rpx - 30rpx);
		margin-top: 10rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		margin-bottom:43rpx;
		.change {
			width: calc(100% - 45rpx);
			margin-left: 45rpx;
			font-family: Source Han Sans;
			font-size: 28rpx;
			font-weight: 550;
			line-height:28rpx;
			letter-spacing: normal;
			color: #1F1F1F;
		}
		
		.explanation{
			width:calc(100% - 30rpx - 30rpx);
			margin-top:20rpx;
			margin-bottom:44rpx;
			padding-right:30rpx;
			padding-left:30rpx;
			font-family: Source Han Sans;
			font-size: 30rpx;
			font-weight: 550;
			line-height: 50rpx;
			letter-spacing: normal;
			font-family: Source Han Sans;
			font-weight: 550;
			font-size: 30rpx;
		}
		.table-view{
			width:calc(100% - 30rpx - 30rpx);
			margin-top:22rpx;
			margin-left:30rpx;
			margin-right:30rpx;
			border-top: 1rpx solid #BABABA;
			.cell-view{
				width:100%;
				height: 60rpx;
				background: rgba(216, 216, 216, 0);
				box-sizing: border-box;
				border-bottom: 1rpx solid #BABABA;
				border-left: 1rpx solid #BABABA;
				border-right: 1rpx solid #BABABA;
				.cell-view-title{
					width:calc((100% / 2) + 23rpx);
					height:100%;
					font-family: Source Han Sans;
					font-size: 26rpx;
					font-weight: 500;
					line-height: 38rpx;
					letter-spacing: normal;
					color: #9E9E9E;
					border-right: 1rpx solid #BABABA;
					
					text-indent: 35rpx;
					
					display:flex;
					align-items: center;
				}
				.cell-view-label{
					width:calc((100% / 2) - 23rpx);
					height:100%;
					font-family: Source Han Sans;
					font-size: 26rpx;
					font-weight: 500;
					line-height: 38rpx;
					letter-spacing: normal;
					color: #9E9E9E;
					
					display:flex;
					align-items: center;
					
					text-indent: 35rpx;
				}
			}
		}

		.card {
			margin-left: 30rpx;
			margin-right: 34rpx;

			.title {
				width: 100%;
				height: 52rpx;
				font-family: Source Han Sans;
				font-size: 36rpx;
				font-weight: 550;
				line-height: normal;
				letter-spacing: normal;
				color: #1F1F1F;
			}

			.desc {
				margin-top: 32rpx;
				width: calc(100% - 11rpx);
				margin-left: 11rpx;
				height: 172rpx;
				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: 550;
				line-height: normal;
				letter-spacing: normal;
				color: #1F1F1F;
				text-indent: 30rpx;
			}

			.label {
				margin-top: 40rpx;
				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: 550;
				line-height: 32rpx;
				letter-spacing: normal;
				color: #1F1F1F;
				text-indent: 30rpx;
			}

			.label-txt {
				margin-top: 29rpx;
				margin-left: 41rpx;
				height: 172rpx;
				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: 550;
				line-height: normal;
				letter-spacing: normal;
				color: #1F1F1F;
			}
			


		}


	}
</style>